<!doctype html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta content="always" name="referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <#include "../../common/header.html">
</head>
<body>
<!--最外面的灰底框,用于与ifram区别开-->
<div class="col-xs-12 lightgray_div">
    <!--白底框-->
    <div class="col-xs-12 white_div">
        <!--搜索框-->
        <div class="col-xs-12 search_div">
            <div class="input-group g-fr">
                <form id="inquire" class="form-inline ">

                    <div class="input-group ">
                        <input type="text" class="form-control" id="name" name="name" placeholder="菜单名称">
                    </div>
                    <button type="button" class="layui-btn" style="height: 30px"  id="btn_search" onclick="table_func.search()"><i
                            class="layui-icon layui-icon-search"></i></button>
                </form>
            </div>
        </div>
        <div class="col-xs-12" style="overflow:auto  " >
            <div>
                <div class="layui-table-tool" style="margin-bottom: -11px;margin-top: 10px">
                    <div class="layui-table-tool-temp">
                        <div style="margin-bottom: -5px">
                            <div class="layui-btn-container " style="float: left;">
                                <button class="layui-btn " onclick="table_func.saveRoleInfo()">
                                    <i class="layui-icon layui-icon-ok"></i>
                                    确定
                                </button>
                                <button class="layui-btn layui-btn-normal" onclick="table_func.cancel()">
                                    <i class="layui-icon layui-icon-close"></i>
                                    取消
                                </button>
                            </div>
                            <div class="layui-table-tool-self">
                                <div class="layui-inline" title="展开所有" lay-event="LAYTABLE_COLS" onclick="table_func.expandAll()" >
                                    <i class="layui-icon layui-icon-triangle-d"></i>
                                </div>
                                <div class="layui-inline" title="折叠所有" lay-event="LAYTABLE_EXPORT" onclick="table_func.foldAll()"  id="">
                                    <i class="layui-icon layui-icon-template-1"></i>
                                </div>
                                <!--<div class="layui-inline" title= lay-event="LAYTABLE_PRINT"><i class="layui-icon layui-icon-print"></i></div>-->
                            </div>
                        </div>
                    </div>
                </div>
                <table id="table_div" lay-filter="main"></table>
            </div>
        </div>
    </div>
</div>
</body>
<#include "../../common/layui_init.html">
<!--表格工具类的按钮-->
<script type="text/javascript">
    var type_map={
        "1":"系统",
        "2":"菜单",
        "3":"按钮"
    }
    //树状表格 表头
    var cols = [
        // {type: 'checkbox'}
        {field: 'id', title: 'id', sort: true, type: 'checkbox', fixed: 'left'}
        , {field: 'name', width:"25%" ,title: '菜单名称',style:' overflow: hidden;text-overflow:ellipsis;white-space: nowrap;'}
        , {field: 'orderno', title: '排序号'}
        // , {field: 'parent_ids', title: '父级'}
        , {
            field: 'type', title: '菜单类型'
            , templet: function (col) {
                return common_utils.transform_map(col.type,type_map)
            }
        }
        , {field: 'level', title: '层级'}
        , {field: 'remark', title: '备注'}
        , {
            field: 'status', title: '菜单状态'
            , templet: function (col) {
                return common_utils.status_transform(col.status)
            }
        }
        , {
            field: 'gmt_create', title: '创建时间'
            , templet: function (col) {
                return layui_table.date_format(col.gmt_create, "yyyy-MM-dd hh:mm:ss")
            }
        },
        {
            field: 'gmt_create', title: '修改时间'
            , templet: function (col) {
                return layui_table.date_format(col.gmt_modified, "yyyy-MM-dd hh:mm:ss")
            }
        }
    ]
    //页面要用的方法
    table_func = {
        //表格初始化
        init: function () {
            layui_table_tree.set_table_data("${request.contextPath}/menu/getAll",cols,$("#inquire").serialize())
            layui_table_tree.table_load_render();
        },
        //搜索
        search: function () {
            layui_table_tree.search($("#inquire").serialize())
        },
        //保存
        saveRoleInfo: function () {
            var ids=layui_table_tree.get_checked_data_id();
            $.getJSON("${request.contextPath}/role/saveMenuInfo", {roleId:"${roleId!?html}",menuIds:ids}, function (o) {
                if(layui_layer.ajax_verify(o)){
                    var data=o.data;
                    table_func.cancel();
                }
            });
        },
        //取消
        cancel: function () {
            var index=parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        },
        load:function(){
            $.getJSON("${request.contextPath}/menu/getMenuIdByRoleId", {roleId:"${roleId!?html}"}, function (o) {
                layui_layer.ajax_verify_not_success_hint(o);
                var data=o.data;
                layui_table_tree.setChecked(data);
            });
        },
        // 展开全部
        expandAll:function(){
            layui_table_tree.expandAll();
        },
        //  折叠全部
        foldAll:function(){
            layui_table_tree.foldAll();
        }
    }
    $(function () {
        //回车点击事件 搜索
        enter_event.event_search_click();
        //树状表格渲染
        table_func.init();
        //取消 父复选框到子复选框的联动
        layui_table_tree.closeCheckboxAllLinkage();
        //设置点击表格行,进行选中
        layui_table_tree.click_line_checked()
        table_func.load();
    });
</script>
<#include "../../common/footer-inner.html">
</html>
